
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品目录</title>
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/catalog.css">
</head>
<body>
    <!-- 引入通用头部 -->
    <div id="commonHeader"></div>

    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <div class="container">
            <!-- 面包屑导航 -->
            <div class="breadcrumb">
                <a href="home.html">首页</a>
                <i class="layui-icon layui-icon-right"></i>
                <span id="current-category">商品目录</span>
            </div>

            <!-- 主要内容区 -->
            <div class="catalog-content">
                <!-- 左侧分类导航 -->
                <div class="catalog-sidebar">
                    <div class="sidebar-title">
                        <i class="layui-icon layui-icon-list"></i>
                        全部商品分类
                    </div>
                    <div class="grid-demo">
                        <div class="layui-panel">
                            <ul class="layui-menu" id="category-list">
                                <!-- 分类列表将通过JavaScript动态加载 -->
                                <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                    <div class="layui-menu-body-title">
                                        加载中...
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 其余内容保持不变 -->
                
                <!-- 右侧商品区域 -->
                <div class="catalog-main">
                    <!-- 筛选区域 -->
                    <div class="filter-area">
                        <div class="filter-item">
                            <span class="filter-label">价格：</span>
                            <div class="filter-options">
                                <a href="javascript:;" class="filter-option active" data-price="all">全部</a>
                                <a href="javascript:;" class="filter-option" data-price="0-20">0-20元</a>
                                <a href="javascript:;" class="filter-option" data-price="20-50">20-50元</a>
                                <a href="javascript:;" class="filter-option" data-price="50-100">50-100元</a>
                                <a href="javascript:;" class="filter-option" data-price="100">100元以上</a>
                            </div>
                        </div>
                        <div class="filter-item">
                            <span class="filter-label">新旧程度：</span>
                            <div class="filter-options">
                                <a href="javascript:;" class="filter-option active" data-degree="all">全部</a>
                                <a href="javascript:;" class="filter-option" data-degree="九成新">九成新</a>
                                <a href="javascript:;" class="filter-option" data-degree="八成新">八成新</a>
                                <a href="javascript:;" class="filter-option" data-degree="七成新">七成新</a>
                                <a href="javascript:;" class="filter-option" data-degree="六成新">六成新</a>
                            </div>
                        </div>
                        <div class="filter-item">
                            <span class="filter-label">排序：</span>
                            <div class="filter-options">
                                <a href="javascript:;" class="filter-option active" data-sort="default">默认</a>
                                <a href="javascript:;" class="filter-option" data-sort="price-asc">价格从低到高</a>
                                <a href="javascript:;" class="filter-option" data-sort="price-desc">价格从高到低</a>
                                <a href="javascript:;" class="filter-option" data-sort="sales">销量优先</a>
                            </div>
                        </div>
                    </div>

                    <!-- 商品列表 -->
                    <div class="product-grid" id="product-grid">
                        <!-- 商品卡片将通过JavaScript动态加载 -->
                        <div class="loading-container">
                            <div class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></div>
                            <p>正在加载商品...</p>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="pagination" id="pagination">
                        <!-- 分页控件将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录弹窗 -->
    <div id="mask">
        <div class="maskContent loginBox">
            <div class="loginTitleBox">
                <div class="loginTitle">登录</div>
                <div class="loginClose" id="closeMask">
                    <i class="layui-icon layui-icon-close"></i>
                </div>
            </div>
            <div class="loginContent">
                <div class="loginInput">
                    <input type="text" id="username" placeholder="请输入用户名">
                </div>
                <div class="loginInput">
                    <input type="password" id="password" placeholder="请输入密码">
                </div>
                <div class="loginBtn">
                    <button class="loginBtn" id="loginSubmit">登录</button>
                </div>
                <div class="loginBtn">
                    <div>没有账号?</div>
                    <button class="loginBtn" id="toRegister">去注册</button>
                </div>
            </div>
        </div>
    </div>

    <script src="./layui/layui.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/auth.js"></script>
    <script src="./js/api.js"></script>
    <script src="./js/header.js"></script>
    <script src="./js/catalog.js"></script>
</body>
</html>
